<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <el-form ref="formRef" label-position="left" :model="formModel" :rules="formRules" label-width="120px">
      <el-row>
        <el-col :sm="24">
          <el-form-item label="直播课程" prop="degreeType">
            <el-select clearable class="w180px mr-3" v-model="formModel.academyId" placeholder="请选择学院" autocomplete="off" @change="getMajorList">
              <el-option v-for="item in academyOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select clearable class="w180px mr-3" v-model="formModel.majorId" placeholder="请选择专业" autocomplete="off" @change="getCourseList">
              <el-option v-for="item in majorOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select clearable class="w180px" v-model="formModel.courseId" placeholder="请选择课程" autocomplete="off">
              <el-option v-for="item in courseOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="老师" prop="name">
            <el-select clearable class="w100" v-model="formModel.teacherId" placeholder="请选择老师" autocomplete="off">
              <el-option v-for="item in teacherOption" :key="item.id" :label="item.teacherName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="直播开始时间" prop="startTime">
            <el-time-select clearable class="w100" v-model="formModel.startTime" :max-time="formModel.endTime" placeholder="直播开始时间" format="HH:mm:ss" start="00:00:00" end="23:59:59" step="00:01" />
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="直播结束时间" prop="endTime">
            <el-time-select clearable class="w100" v-model="formModel.endTime" :min-time="formModel.startTime" placeholder="直播结束时间" format="HH:mm:ss" start="00:00:00" end="23:59:59" step="00:01" />
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="直播教室" prop="degreeType">
            <el-select clearable class="w180px mr-3" v-model="formModel.campusId" placeholder="请选择校区" autocomplete="off" @change="getBuildingList">
              <el-option v-for="item in campusOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select clearable class="w180px mr-3" v-model="formModel.buildingId" placeholder="请选择教学楼" autocomplete="off" @change="getRoomList">
              <el-option v-for="item in buildingOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-select clearable class="w180px" v-model="formModel.roomId" placeholder="请选择课程" autocomplete="off">
              <el-option v-for="item in roomOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24">
          <el-form-item label="直播类型" prop="liveTaskType">
            <el-radio-group v-model="formModel.liveTaskType">
              <el-radio v-for="item in liveTaskTypeOption" :label="item.key" :key="item.key">{{item.label}}</el-radio>
            </el-radio-group>
            <el-transfer  class="mt-3" :titles="['请选择互动教室', '已选择']" v-model="formModel.interactRoom" :data="roomOption" :props="{key: 'id',label: 'name'}" />
          </el-form-item>
        </el-col>

        <el-col :sm="24">
          <el-form-item label="备注" prop="note">
            <el-input v-model="formModel.note" :rows="2" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="info" plain @click="onCancel()">取消</el-button>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 管理员编辑组件
 */
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { getNewObj } from '@/utils/EsCommon';
import { liveTaskParams, liveTaskTypeList } from '@/apis/model/LiveTaskModel';




// ======================================================
//                      变量声明
// ======================================================

// emit
const emit = defineEmits(['success']);
// 表单数据
const formAttrs = getNewObj(liveTaskParams());

const formModel = ref(Object.assign({}, formAttrs));
// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '730px',
})
// 表单组件的引用实例
const formRef = ref(null);

// 选项数据
const liveTaskTypeOption = ref(liveTaskTypeList);
const academyOption = ref([]);
const majorOption = ref([]);
const courseOption = ref([]);
const teacherOption = ref([]);
const campusOption = ref([]);
const buildingOption = ref([]);
const roomOption = ref([]);
// 表单校验规则
const formRules = ref({
  name: [{ required: true, trigger: "blur", message: "请输入教室名称" }],
})

// ======================================================
//                      点击操作
// ======================================================

// 点击提交按钮
const onSubmit = () => {
  formRef.value.validate((valid, fields) => {
    if (!valid) {
      console.log('表单校验失败：', fields);
      return;
    }
    let url = formModel.value.id > 0 ? ApiUrls.courseChange : ApiUrls.courseEdit;
    EsAjax.post(url, formModel.value).then(res => {
      if (res.data.code !== 200) {
        ElMessage.warning(res.data.msg);
        return;
      }
      dialogInfo.value.visible = false;
      ElMessage.success('提交成功');
      emit('success');
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })
  })
}

// 点击取消按钮
const onCancel = () => {
  formModel.value = Object.assign({}, formAttrs);
  formRef.value.resetFields();
  dialogInfo.value.visible = false;
}
// ======================================================
//                      处理事件
// ======================================================

// 加载数据
const show = async (id, title, item = null, width = '730px') => {
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;
  formModel.value = Object.assign({}, formAttrs)
  // 加载详情数据
  if (id) {
    formModel.value = Object.assign({ ...formAttrs }, getNewObj(item));
  }
  getAcademyList();
  getCampusList();
  // getBuildingList();
  getRoomList();
  // getMajorList();
  // getCourseList();
  getTeacherList();
}
const getAcademyList = () => {
  EsAjax.post(ApiUrls.academyList, { params: {} }).then(res => {
    console.log(res)

    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    academyOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

const getMajorList = () => {
  EsAjax.post(ApiUrls.majorList, { params: {} }).then(res => {
    console.log(res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    majorOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}
const getCourseList = () => {
  EsAjax.post(ApiUrls.courseList, { params: {} }).then(res => {
    console.log(res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    courseOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}
const getCampusList = () => {
  EsAjax.post(ApiUrls.campusList, { params: {} }).then(res => {
    console.log(res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    campusOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}
const getBuildingList = () => {
  EsAjax.post(ApiUrls.buildingList, { params: {} }).then(res => {
    console.log(res)

    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    buildingOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}
const getRoomList = () => {
  EsAjax.post(ApiUrls.roomList, { params: {} }).then(res => {
    console.log(res)

    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list } = res.data.data
    roomOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}
const getTeacherList = () => {
  EsAjax.post(ApiUrls.teacherList, { params: {} }).then(res => {
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    let { list, count } = res.data.data
    teacherOption.value = list;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

defineExpose({
  show
})
</script>

<style scoped>
</style>
